<template>
  <div class="">
    <!-- <Editor
      id="tinyEditor"
      ref="tinyEditorRef"
      v-model="contentValue"
      :init="options"
      :disabled="isdisabled"
    /> -->
    <Editor
      :id="id"
      ref="tinyEditorRef"
      v-model="contentValue"
      :init="options"
      :disabled="isdisabled"
    />
  </div>
</template>

<script lang="ts" setup scoped>
import { useVModel } from "@vueuse/core";
//引入tinymce编辑器
import Editor from "@tinymce/tinymce-vue";
//引入方式引入node_modules里的tinymce相关文件文件
import tinymce from "tinymce/tinymce"; //tinymce默认hidden，不引入则不显示编辑器
import "tinymce/themes/silver"; //编辑器主题，不引入则报错
import "tinymce/icons/default"; //引入编辑器图标icon，不引入则不显示对应图标
// 引入编辑器插件
import "tinymce/plugins/advlist"; //高级列表
import "tinymce/plugins/anchor"; //锚点
import "tinymce/plugins/autolink"; //自动链接
import "tinymce/plugins/autoresize"; //编辑器高度自适应,注：plugins里引入此插件时，Init里设置的height将失效
import "tinymce/plugins/autosave"; //自动存稿
import "tinymce/plugins/charmap"; //特殊字符
import "tinymce/plugins/code"; //编辑源码
import "tinymce/plugins/codesample"; //代码示例
import "tinymce/plugins/directionality"; //文字方向
import "tinymce/plugins/emoticons"; //表情
import "tinymce/plugins/fullpage"; //文档属性
import "tinymce/plugins/fullscreen"; //全屏
import "tinymce/plugins/help"; //帮助
import "tinymce/plugins/hr"; //水平分割线
import "tinymce/plugins/image"; //插入编辑图片
import "tinymce/plugins/importcss"; //引入css
import "tinymce/plugins/insertdatetime"; //插入日期时间
import "tinymce/plugins/link"; //超链接
import "tinymce/plugins/lists"; //列表插件
import "tinymce/plugins/media"; //插入编辑媒体
import "tinymce/plugins/nonbreaking"; //插入不间断空格
import "tinymce/plugins/pagebreak"; //插入分页符
import "tinymce/plugins/paste"; //粘贴插件
import "tinymce/plugins/preview"; //预览
import "tinymce/plugins/print"; //打印
import "tinymce/plugins/quickbars"; //快速工具栏
import "tinymce/plugins/save"; //保存
import "tinymce/plugins/searchreplace"; //查找替换
// import 'tinymce/plugins/spellchecker'  //拼写检查，暂未加入汉化，不建议使用
import "tinymce/plugins/tabfocus"; //切入切出，按tab键切出编辑器，切入页面其他输入框中
import "tinymce/plugins/table"; //表格
import "tinymce/plugins/template"; //内容模板
import "tinymce/plugins/textcolor"; //文字颜色
import "tinymce/plugins/textpattern"; //快速排版
import "tinymce/plugins/toc"; //目录生成器
import "tinymce/plugins/visualblocks"; //显示元素范围
import "tinymce/plugins/visualchars"; //显示不可见字符
import "tinymce/plugins/wordcount"; //字数统计
// 引入三方扩展插件
import "@npkg/tinymce-plugins/imagetools";
// import '@npkg/tinymce-plugins/importword';
import "@tinymce-plugin/tp-importword";
import "@npkg/tinymce-plugins/table";
import "@npkg/tinymce-plugins/lineheight";

const props = defineProps({
  height: {
    type: [String, Number],
    default: 650,
  },
  id: {
    type: String,
    default: "",
  },
  value: {
    type: String,
    default: "",
  },
  isdisabled: {
    type: Boolean,
    default: false,
  },
  plugins: {
    type: [String, Array],
    default:
      "print preview searchreplace autolink directionality emoticons visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount textpattern  imagetools tpImportword lineheight",
  },
  toolbar: {
    type: [String, Array],
    default:
      "fullscreen code undo redo restoredraft | cut copy paste pastetext image | forecolor backcolor bold italic underline strikethrough link anchor table | alignleft aligncenter alignright alignjustify outdent indent | \
         styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
         media charmap emoticons hr pagebreak insertdatetime print preview tpImportword | bdmap indent2em lineheight formatpainter axupimgs",
  },
});
const emits = defineEmits(["content-change"]);
const contentValue = useVModel(props, "value", emits);

watch(
  () => props.value,
  (val) => {
    const editor = tinymce.get(props.id);
    if (editor && editor?.iframeElement) {
      editor.iframeElement.contentWindow.scrollTo(0, 0);
    }
  },
  { immediate: true, deep: true }
);
/**
 * 富文本
 */
// 编辑器配置文件
const options = ref({
  emoticons_database_url: "/tinymce/emoticons/js/emojis.js", //更改表情插件路径
  language_url: "/tinymce/zh_CN.js", //引入语言包文件
  language: "zh_CN", //语言类型
  skin_url: "/tinymce/skins/ui/oxide", //皮肤：亮色
  plugins: props.plugins, //插件配置
  toolbar: props.toolbar, //工具栏配置，设为false则隐藏
  toolbar_sticky: true,
  fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt 48pt 56pt 72pt",
  // fontsize_formats: '12px 14px 16px 18px 20px 22px 24px 28px 32px 36px 48px 56px 72px', //字体大小
  // font_formats:
  //   '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',
  font_formats:
    "黑体=SimHei,sans-serif;仿宋_GB2312=FangSong_GB2312,Helvetica,Arial,sans-serif;楷体=KaiTi,Helvetica,Arial,sans-serif;楷体_GB2312=KaiTi_GB2312,sans-serif;微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;宋体=SimSun,serif;仿宋体=FangSong,serif;",
  height: props.height, //注：引入autoresize插件时，此属性失效
  placeholder: "在这里输入文字...",
  paste_data_images: true, // 设置为“true”将允许粘贴图像，而将其设置为“false”将不允许粘贴图像。
  branding: false, //tiny技术支持信息是否显示
  resize: false, //编辑器宽高是否可变，false-否,true-高可变，'both'-宽高均可，注意引号
  statusbar: true, //最下方的元素路径和字数统计那一栏是否显示
  elementpath: false, //元素路径是否显示
  content_style:
    "img {max-width:100%;} html {background-color:#fff;color:inherit;}", //直接自定义可编辑区域的css样式
  content_css: "/tinymce/tinycontent.css", //以css文件方式自定义可编辑区域的css样式，css文件需自己创建并引入
  images_upload_handler: (blobInfo: any, success: any) => {
    const img = "data:image/jpeg;base64," + blobInfo.base64();
    success(img);
  },
  importword_handler: function (editor, files, next) {
    var file_name = files[0].name;
    if (file_name.substr(file_name.lastIndexOf(".") + 1) == "docx") {
      editor.notificationManager.open({
        text: "正在转换中...",
        type: "info",
        closeButton: false,
      });
      next(files);
    } else {
      editor.notificationManager.open({
        text: "目前仅支持docx文件格式，若为doc，请将扩展名改为docx",
        type: "warning",
      });
    }
  },
});

//判断什么背景的编辑器，并在切换配色时更换配置
// 初始化 tinymce
onBeforeMount(() => {
  tinymce.init({});
});
</script>

<style lang="scss" scoped>
@import "tinymce/skins/content/default/content.css";
</style>

<style>
.tox.tox-tinymce-aux {
  z-index: 3000;
}
</style>
